<template>
  <!-- tab选项卡滑动切换 -->
  <view class="my-tab" ref="myTabRef">
    <view
      class="my-tab-item"
      v-for="(item, index) in tabs" :ref="`tab${item.name}Ref`"
      :class="{ active: item.name === activeItem }" :key="index"
    >
      <view class="my-tab-text" ref="tabName"  @click="tabClick(item,index)">
         <view class="name">{{ item.label }}</view>
         <view class="xian"></view>
      </view>
    </view>
  </view>
</template>
<script>
	/*
		tabs -- 传入标签名 array类型 : tabs: [{name: "tabOne",label: "全部"},{...}]
		activeItem -- 默认第一个class名 string
		@tabClick -- 自定义点击事件 回传用到 做逻辑判断
	  标签大小、默认颜色、选中颜色，下边框线等样式，已在css中注释，请根据注释修改即可
	*/
export default {
  name: "cx-navTitle",
  props:{
    tabs:{ //所有标签名
     type:Array,
     default:[]
    },
    activeItem:{//默认第一个 选中的class类名
      type:String,
      default:''
    },
  },
  data() {
    return {
    };
  },
  mounted(){
  },
  methods: {
    // tab点击
    tabClick(item,index) {
      this.$emit('tabClick',item) //回传数据
      // 触发滑动方法
      this.scrollLeftTo(item.name);
    },
    // 滑动
    scrollLeftTo(name) {
      const ref = `tab${name}Ref`;
      // 获取myTabRef的DOM元素，即类名为my-tab的标签
      const nav = this.$refs.myTabRef.$el;
      // 获取当前点击的某一个tab的的DOM元素，即类名为my-tab-item的标签
      const title = this.$refs[ref][0].$el;
      // 计算位移偏差
      const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
      nav.scrollLeft = to;
    },
  },
};
</script>
 
<style lang="scss">
.my-tab {
  width:720rpx;
  margin:0 auto;
  // height:80rpx;
  // background: #ffffff;
  // line-height:80rpx;
  // border:1px solid red;
  display: flex;
  overflow-x: scroll;
  padding-right:0rpx;
  scroll-behavior: smooth; //平稳的滑动效果
  font-size:32rpx;
  font-family:PingFang-SC-Heavy;
  .my-tab-item {
    padding: 20rpx 35rpx; //标签上下左右距离 -- 在这里改
    color:#fff; //标签默认颜色 -- 在这里改
    // height: 0rpx;
    text-align: center;
    flex: 1 0 auto;
    &.active {
      color:#707070; //标签选中颜色 -- 在这里改
      font-family:PingFang-SC-Heavy;
      font-weight:600;
      position: relative;
      .my-tab-text {
        .xian{
         position:relative;
         top:-11rpx; //下边框线和标签距离 -- 在这里改
         z-index:8;
         border:6rpx solid #333333; //标签底部下边框线 -- 在这里改
         border-radius:50rpx;
         padding:0rpx 30rpx;
         opacity:0.6;//下边框线透明度 -- 在这里改
        }
        .name{
          position:relative;
          z-index:9;
        }
      }
    }
  }
}
// 隐藏滚动条
::-webkit-scrollbar {
  height: 0;
  width: 0;
  color: transparent;
}
</style>